import React, { memo, useEffect, useState } from 'react'
import { Image } from "antd"
// 导入接口
import { getGeshouList } from '../../../api/geshouApi'
import { SinggerArea, SinggerType, EnglishLetters } from '../../../constant/local-constant'
import { PlaceholderImg, ImgError } from '../../../constant/local-constant'
import { MusicClubSingerBox } from './style'


// 歌手 页面得  type 取值 
// export const SinggerType = [{ id: -1, name: "全部" }, { id: 1, name: "男歌手" }, { id: 2, name: "女歌手" }, { id: 3, name: "乐队" },]

// 歌手页面的  area 取值
// export const SinggerArea = [{ id: -1, name: "全部" }, { id: 7, name: "华语" }, { id: 96, name: "欧美" }, { id: 8, name: "日本" }, { id: 16, name: "韩国" }, { id: 0, name: "其他" },]
export default memo(function MusicClubSinger() {
  const [queryInfo, setQueryInfo] = useState({ initial: "全部", type: -1, area: -1 })
  const [list, setList] = useState([])

  const changeQueryInfo = (type, value) => {
    let obj = { ...queryInfo }
    if (type == "initial") {
      // 如果 initial 的值 是全部，那么再请求的时候，这个参数不必传入
      obj.initial = value
    }
    if (type == "area") {
      obj.area = value.id
    }
    if (type == "type") {
      // 这里指的是  歌手类型 
      obj.type = value.id

    }
    setQueryInfo(obj)
  }

  useEffect(() => {
    getGeshouList(queryInfo).then(res => {
      // console.log(res);
      setList(res.artists)
    })
  }, [queryInfo])

  // 一共就  100 个 歌手
  return (
    <MusicClubSingerBox>
      <div className="bg">
        <h2>你关注得歌手将展示在这里</h2>
        <h3>快速起歌,想听就听！</h3>
      </div>
      <main className="wrap2">
        <div className="query">
          <div>
            {
              EnglishLetters.map((item, index) => {
                return (
                  <span onClick={e => { changeQueryInfo("initial", item) }} className={queryInfo.initial === item ? "active" : ""} key={index}>{item}</span>
                )
              })
            }
          </div>
          <div>
            {
              SinggerArea.map((item, index) => {
                return (
                  <span onClick={e => { changeQueryInfo("area", item) }} className={queryInfo.area === item.id ? "active" : ""} key={index}>{item.name}</span>
                )
              })
            }
          </div>
          <div>
            {
              SinggerType.map((item, index) => {
                return (
                  <span onClick={e => { changeQueryInfo("type", item) }} className={queryInfo.type === item.id ? "active" : ""} key={index}>{item.name}</span>
                )
              })
            }
          </div>
        </div>
        <div className="content">
          {/* <div className="item">
            <img src="https://y.qq.com/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="" />
            <p>周杰伦</p>
          </div> */}
          {
            list.map(item => {
              return (
                <div className="item" key={item.id}>
                  <Image
                    width={140}
                    height={140}
                    src={item.picUrl}
                    preview={false}
                    fallback={ImgError}
                    placeholder={
                      <Image
                        preview={false}
                        width={140}
                        height={140}
                        src={PlaceholderImg}
                      />
                    }
                  />
                  <p>{item.name}</p>
                </div>
              )
            })
          }
        </div>
      </main>
    </MusicClubSingerBox>
  )
})
